<template>
  <div class="subject">
    <el-card>
      <div class="list">
        <div class="number">
          <div class="size">学科编号</div>
          <el-input v-model="page.rid" @keyup.enter.native="searchBtn" />
        </div>
        <div class="number">
          <div class="size">学科名称</div>
          <el-input v-model="page.name" @keyup.enter.native="searchBtn" />
        </div>
        <div class="number">
          <div class="size">创建者</div>
          <el-input v-model="page.username" @keyup.enter.native="searchBtn" />
        </div>
        <div class="number">
          <div class="size1">状态</div>
          <el-select
            v-model="page.status"
            placeholder="请选择"
            @keyup.enter.native="searchBtn"
          >
            <el-option value="0" label="禁用"></el-option>
            <el-option value="1" label="启用"></el-option>
          </el-select>
        </div>
        <el-button type="primary" style="margin-left: 10px" @click="searchBtn"
          >搜索</el-button
        >
        <el-button @click="clearBtn">清除</el-button>
        <el-button type="primary" @click="addBtn">+新增学科</el-button>
      </div>
    </el-card>
    <el-card>
      <el-table :data="initList">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            {{ (page.page - 1) * page.limit + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="学科编号" prop="rid" />
        <el-table-column label="学科名称" prop="name" />
        <el-table-column label="学科简介" prop="short_name" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column width="200px" label="创建日期" prop="create_time" />
        <el-table-column label="状态" prop="status">
          <template v-slot="{ row }">
            <!-- <span
              v-if="$store.state.login.userInfo.role === '管理员'"
              :style="{ color: row.status === 0 ? 'red' : '' }"
              >{{ row.status === 0 ? '禁用' : '启用' }}</span
            > -->
            <el-switch
              :disabled="$store.state.login.userInfo.role === '学生'"
              v-model="row.status"
              active-color="#409eff"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="close(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="editBtn(row)">编辑</el-button>
            <el-button type="text" @click="cutBtn(row)" v-if="colShow">
              {{ row.status === 0 ? '启用' : '禁用' }}</el-button
            >

            <el-button type="text" @click="open(row.id)" v-if="colShow"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 5, 10, 100, 200, 300, 400]"
          :page-size.sync="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import add from './components/NewAdd.vue'
import { subjectList, subjectRemove, subjectStatus } from '@/api/subjectList'
import jsCookie from 'js-cookie'
export default {
  components: {
    add
  },
  data () {
    return {
      initList: [],
      page: {
        page: 1,
        limit: +jsCookie.get('subject_page') || 10,
        name: '',
        value: '',
        rid: '',
        short_name: '',
        status: '',
        username: ''
      },
      total: 0,
      colShow: true
    }
  },
  created () {
    this.getData()
    this.colP()
  },
  methods: {
    // 获取
    async getData () {
      // console.log('11')
      const res = await subjectList(this.page)
      // 将状态从字符串转换成数字型
      this.initList = res.data.items
      // console.log(this.initList)
      this.total = res.data.pagination.total
      // console.log(res)
      // console.log('1', res)
    },
    // 新增
    addBtn () {
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 编辑
    editBtn (row) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 删除
    open (id) {
      this.$confirm('您确定删除此学科吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '点错了',
        type: 'warning'
      })
        .then(async () => {
          await subjectRemove({ id })
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          if (this.page.page > 1 && this.initList.length <= 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索按钮
    searchBtn () {
      this.getData()
    },

    // 状态切换
    async cutBtn (row) {
      await subjectStatus({
        id: row.id,
        status: row.status
      })

      this.getData()
      this.$message.success('切换状态成功')
    },
    // 开关按钮
    async close (row) {
      await subjectStatus({
        id: row.id,
        status: row.status
      })
      this.getData()
      this.$message.success('切换状态成功')
    },
    // 页容量
    handleSizeChange () {
      this.getData()
      // console.log(`每页 ${val} 条`)
      jsCookie.set('subject_page', this.page.limit)
    },
    handleCurrentChange () {
      this.getData()
      // console.log(`当前页: ${val}`)
    },
    // 清除
    clearBtn () {
      this.page.rid = ''
      this.page.name = ''
      this.page.username = ''
      this.page.status = ''
      this.getData()
    },
    // 列表权限
    colP () {
      if (this.$store.state.login.userInfo.role === '学生') {
        this.colShow = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.subject {
  margin: 10px;
  .list {
    display: flex;
    //justify-content: space-around;
    padding: 20px 0 40px;
    .number {
      display: flex;
      align-items: center;
      .size {
        color: rgb(99, 100, 104);
        padding-right: 8px;
        width: 100px;
        text-align: center;
      }
      .size1 {
        padding-right: 7px;
        width: 60px;
      }
    }
  }
  .pagination {
    text-align: center;
    margin-top: 30px;
  }
  ::v-deep .el-button el-button--primary {
    padding-right: 5px;
  }
}
</style>
